<template>
    <div class="find">
        <div class="findTop">
            <div class="songSheetList">
                <!-- 歌单列表 -->
                <div class="tabList">
                    <div v-for="(item, index) in tabList" :class="selectedIndex == index && 'selectedItem'"
                        @click="getSongSheet(item.name, index)">{{ item.name }}</div>
                </div>
                <div v-if="!loading" class="songSheet">
                    <div v-for="(item, index) in  songSheet" @click="getHandleSongData(item)"
                        @mouseenter="selectedSongIndex = index" :key="item.id">
                        <img v-lazys="item.coverImgUrl" crossorigin="" @load="colorThief" style="width: 100%;height: 22vh;">
                        <div :style="`background: rgba(${backgroundColor[index]})`" class="introduce">
                            <p>{{ item.name }}</p>
                        </div>
                        <div class="formatNumber">{{ formatNumber(item.playCount) }}</div>
                        <div @mouseleave="selectedSongIndex = -1"
                            :style="{ 'opacity': selectedSongIndex === index ? '1' : '0' }" class="mask"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="findFooler"></div>
        <div style="position: absolute;top: 50vh;width: 75%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import * as songSheetAPI from '@/api/songSheet'
import useCounterStore from '@/stores/counter'
import colorthief from 'colorthief'
const router = useRouter()
const tabList = ref([] as Array<any>)
// const { songSheetInfo } = toRefs(useCounterStore())//获取pinia的状态
const { formatNumber } = useCounterStore()//获取pinia中的方法
const selectedIndex = ref(0)//选中的tab栏的下标
const selectedSongIndex = ref(-1)//选中歌单的下标
const songSheet = ref([] as Array<any>)
const backgroundColor = ref([] as Array<any>);
const loading = ref<boolean>(false);// 加载

onMounted(() => {
    //精品歌单标签列表
    songSheetAPI.getHighqualitySongListTag().then(({ data }) => {
        if (data.code === 200) {
            tabList.value = data.tags
            getSongSheet(tabList.value[0].name, selectedIndex.value)
        }
    })
})
//切换精品歌单比如 " 华语 "、" 古风 " 、" 欧美 "、" 流行 "," 日语 "等
const getSongSheet = (tab: string, index: number) => {
    // 设置加载状态为true
    loading.value = true
    // 设置选中的索引为传入的索引
    selectedIndex.value = index
    // 调用歌曲表API，传入tab参数，获取高质量歌曲列表
    songSheetAPI.getHighqualitySongList({ cat: tab }).then(({ data }) => {
        // 如果返回的状态码为200
        if (data.code === 200) {
            // 清空backgroundColor数组
            backgroundColor.value = []
            // 将返回的数据赋值给songSheet
            songSheet.value = data.playlists
            // 设置加载状态为false
            loading.value = false
        }
    })
}

//获取表单中的数据
const getHandleSongData = (item: { id: number}) => {
    // 跳转到歌曲信息页面
    router.push({ path: '/home/songSheetInfo', query: { id: item?.id } })
}
//获取背景颜色
async function colorThief(event: any) {
    // 创建一个colorthief实例
    const colorThief = new colorthief()
    // 获取图片的RGB颜色值
    const colors = await colorThief.getColor(event.target)
    // 将颜色值添加到backgroundColor数组中
    backgroundColor.value.push(colors)
}
</script>

<style lang="scss" scoped>
.find {
    width: 100%;
    height: 88%;
    margin-top: 10dvh;
    overflow: auto;
    animation: identifier 3s;


    @keyframes identifier {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .findTop {
        width: 100%;
        height: 70vh;
        padding: 0 4vw;
        box-sizing: border-box;

        h2 {
            color: aliceblue;
        }

        >p {
            margin: 8px 0;
            color: aliceblue;
            font-weight: 700;
        }

        .songSheetList {
            width: 100%;

            .tabList::-webkit-scrollbar {
                display: none;
            }

            .tabList {
                width: 100%;
                color: #fff;
                overflow: auto;
                height: 8vh;
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                >div {
                    margin: 2vh 1vw;
                    font-size: 12px;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 50px;
                    padding: 5px 10px;
                    cursor: pointer;
                }
            }
        }
    }
}

.songSheet {
    display: flex;
    flex-wrap: wrap;

    >div {
        width: 20%;
        height: 28.5vh;
        margin: 2%;
        cursor: pointer;
        position: relative;

        .mask {
            position: absolute;
            top: 0;
            width: 100%;
            height: 22vh;
            left: 0;
            background: rgba(255, 255, 255, 0.2);
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }

        .formatNumber {
            position: absolute;
            top: 2vh;
            right: 1vw;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
        }

        img {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }

        .introduce {
            width: 100%;
            height: 6vh;
            background: rgba(255, 255, 255, 0.6);
            margin-top: -0.6vh;
            padding: 2px 10px;
            box-sizing: border-box;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;

            >P {
                color: #fff;
                font-size: 12px;
            }
        }
    }
}

.selectedItem {
    border: 0.1px solid rgb(255, 102, 102);
    background: rgba(206, 98, 98, 0.2) !important;
    color: rgb(255, 166, 166);
}

.find::-webkit-scrollbar {
    display: none;
}
</style>